import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
// 把公共数据放到状态管理器
  // state相当于vue当中data
  // 页面上访问state方式1 - this.$store.state.xxx
  //                方式2 - 通过mapState方法生成计算属性 ...mapState(['jerryCount', 'tomCount'])
  state: {
    tomCount: 0,
    jerryCount: 0
  },
  // 把修改数据同步方法也放到状态管理
  // mutations相当于vue当中的methods
  // 页面上访问mutation方式1 - this.$store.commit('yyy', data)
  //                  方式2 - 通过mapMutations方法
  mutations: {
    addTom(state, data) {
      // 注意,不是通过this修改数据,而是通过state修改数据
      state.tomCount += data
    },
    addJerry(state, data) {
      // 不是通过this修改数据,而是通过state修改数据
      state.jerryCount += data
    }
  },
  // 异步的代码放到actions当中
  // 页面上访问actions方式1 - this.$store.dispatch('yyy',data)
  //                 方式2 - 通过mapActions方法
  actions: {
    addTomSync(context, data) { // context等效于this.$store
      setTimeout(() => {
        // 注意在action当中不能直接修改state,修改state只能通过mutations
        context.commit('addTom', data)
      }, 2000)
    }
  },
  // getters相当于vue当中的计算属性
  // 页面上访问getters方式1 - this.$store.getters.xxx
  //                 方式2 - 通过mapGetters方法
  // getters: {
  //   showJerryCount(state) {
  //     return 'jerry:' + state.jerryCount
  //   }
  // },
  getters,
  modules: {
    app,
    settings,
    user
  }

})

export default store
